.ShowPage {
    background: #CDC0A4;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;


    .ShowPage_Side {
        width: 360px;
        min-width: 360px;
        height: calc(100% - 0px);
        // height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        z-index: 100;


        &.toggle_show {
            left: 0px;
            transition: left 1s;
        }

        &.toggle_hide {
            left: -330px;
            transition: left 0.5s;
        }
    }



    .ShowPage_Side_Main {
        width: 230px;
        min-width: 230px;
        height: 100%;

        background-color: #F9F3E2;
        display: flex;
        flex-direction: column;

        overflow: hidden;

        align-items: center;

        &.has_scroll_bar {
            overflow-y: scroll;
        }

        .single_container {
            width: 200px;
            min-width: 200px;
            height: 200px;
            min-height: 200px;
            margin: 1px 0px;

            border: 5px #F9F3E2 solid;

            position: relative;

            .single_img_container {

                width: 100%;
                height: 100%;
                background-color: #000000;

                img {
                    width: 100%;

                    height: 100%;


                }
            }

            .single_bottom_container {
                height: 44px;
                background-color: whitesmoke;
                position: absolute;
                bottom: 0;
                z-index: 1000;
                width: 100%;
                display: flex;

                opacity: 0.5;

                justify-content: center;
                align-items: center;


                &>div {
                    flex: 1;
                    height: 100%;
                    justify-content: center;
                    align-content: center;
                    margin-left: 1px;
                    background-color: #484947;
                    align-items: center;
                    display: flex;
                    cursor: pointer;
                    opacity: 0.9;

                    img {
                        width: 30px;
                        height: 30px;
                    }

                }

                &>div:first-child {
                    margin-left: 0px;
                }
            }

            &:hover,
            &.active {
                border: 5px red solid;
            }


        }

        .single_container:first-child {
            margin-top: 7px;
        }




    }

    .ShowPage_Tool {
        width: 100px;
        height: 204px;
        min-width: 100px;
        justify-content: center;
        align-items: center;

        background-color: lightsteelblue;
        display: flex;

        flex-direction: column;
        // border: 1px  solid;
        // border-left: none;


        &>div {
            display: flex;
            height: 40px;
            line-height: 40px;
            width: 100%;
            background: lightslategray;
            justify-content: center;
            align-content: center;
            align-items: center;
            cursor: pointer;
            color: white;

            &:hover,
            &.active {
                background-color: #C01919;
                color: white;
                cursor: pointer;
            }
        }


        &>div:not(:first-child) {
            margin-top: 1px;
        }



    }



    .ShowPage_Tool_Min {
        width: 30px;
        min-width: 30px;
        height: 100px;
        // position: relative;
        // top: 50%;
        // left: 380px;
        // margin-top: -70px;
        // transform: translateY(-50%);
        background-color: lightslategrey;
        z-index: 9999;

        // &.fixed
        // {
        //     position: absolute;
        //     top:100;
        //     left:200;
        //     display: block;
        // }

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;
        align-content: center;

        background: white;

        &>div {
            word-wrap: break-word;
            letter-spacing: 20px;
            flex: 1;
            justify-content: center;
            align-items: center;
            align-content: center;

            color: lightgray;

            background: lightseagreen;

        }

        &>div:not(:first-child) {
            margin-top: 1px;
        }

    }

    .ShowPage_Main {

        background: #ECDEBE;


        height: 100%;
        width: 100%;

        position: relative;

        &.night {
            background: #242424;
        }

        .canvas-container {
            transition: top 0.1s, left 0.1s;
        }



    }



}

#canvas {
    cursor: pointer;
    // background: url(canvas_bg.jpg) repeat;
    // top: 100;
    // left: 200;
    // position: absolute;
}

.canvas_mask {
    width: 100%;
    height: 100%;
    background-color: lightslategray;
    opacity: 0.3;
    cursor: move;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: white;
    font-size: 16px;
    position: absolute;

    &::after {
        content: '整体拖放模式';
        line-height: 40px;
        padding-right: 20px;
    }
}

.canvas_click_position_drop_mask {
    width: 100%;
    height: 100%;
    background-color: lightslategray;
    opacity: 0.3;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: white;
    font-size: 16px;
    position: absolute;

    &::after {
        content: '点击放置模式';
        line-height: 40px;
        padding-right: 20px;
    }
}

.bg_canvas_one {
    display: inline-block;
    // background: url(canvas_bg.jpg) repeat;
    background-repeat: repeat;
    border: 1px lightgray solid;
}

.canvas-container {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute !important;
}

.wrap_for_show_create_img {
    background: url("http://www.besteasylearn.com/pic/1210x610.png") repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 15px;
    left: calc(100% - 630px);
    // transform: translate(-50%, -50%);
    width: 615px;
    height: 315px;
    // display: none;
    border: 15px white solid;
    border-radius: 8px;

    &>img {
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
    }

    .show_img_close {
        position: absolute;
        top: 10px;
        left: 1200px;
    }
}


.img_for_show_create_img {
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    background: url(http://www.besteasylearn.com/pic/canvas_bg/%E7%B1%B3_1200x600.png) no-repeat;
}

.show_video_wrap .ant-modal-body {
    padding: 10px 10px 5px 10px;
    position: relative;
}

// .my_video {
//     width: 100%;
//     height: 100%;
// }


.show_free_dialog {

    position: fixed;
    background-color: #F7F0DD;
    border: 1px orangered solid;

    width: 1440px;
    height: 780px;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;

    display: flex;
    flex-direction: row;


    .free_side {
        width: 160px;
        // background-color: aquamarine;
        height: 100%;
        border-right: 1px orangered solid;



        .free_side_each {
            width: 150px;
            height: 150px;
            margin: 5px;
            background-color: black;

            &>img {
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
    }

    .free_right {
        // flex-grow: 1;

        height: 100%;

        width: 1200px;
        margin: 0 auto;

        display: flex;
        flex-direction: column;

        .free_right_01 {
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            // background-color: lightblue;

            &>img {
                width: 278px;
                height: 50px;
            }
        }

        .free_right_02 {
            height: 80px;
            display: flex;
            flex-direction: row;
            // background-color: rebeccapurple;
            justify-content: flex-start;
            align-items: center;

            &>div {
                padding: 10px;
                cursor: pointer;
            }
        }

        .free_right_03 {
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            // background-color: #ECDEBE;

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            vertical-align: bottom;

            &>img {
                width: 300px;
                height: 300px;

                display: inline-block;
                // background-color: lightslategrey;
            }
        }

        .free_right_04 {
            line-height: 30px;
            height: 30px;
            font-size: 16px;
            // background-color: lightcoral;
        }


        .free_right_05 {
            height: 70px;
            display: flex;
            justify-content: flex-end;
            // background-color: darkmagenta;
        }


    }



}

.player {
    width: 1000px;
    height: 500px;
}

.video_mask {
    width: 1280px;
    height: 710px;
    // background-color: lightblue;
    position: absolute;
    top: 0;
}

